<template>
    <div><van-nav-bar title="千人千店" class="page-nav-bar"/></div>
    <div class="register-container">
        <div class="register-card">
            
            <p class="subtitle">创建一个新的账户</p>
            <van-form @submit="submitForm" ref="registerForm" class="register-form">
                <van-field size='large' v-model="form.username" name="username" label="账号" placeholder="请输入账号"
                    :rules="[{ required: true, message: '请输入账号' }]" left-icon="user-o" />
                <van-field size='large'  v-model="form.nickname" name="nickname" label="昵称" placeholder="请输入昵称"
                    :rules="[{ required: true, message: '请输入昵称' }]" left-icon="friends-o" />
                <van-field size='large'  v-model="form.password" type="password" name="password" label="密码" placeholder="请输入密码"
                    :rules="[{ required: true, message: '请输入密码' }, { min: 6, message: '密码长度至少为6位' }]"
                    left-icon="lock" />
                <van-field size='large'  v-model="form.confirmPassword" type="password" name="confirmPassword" label="确认"
                    placeholder="请确认密码"
                    :rules="[{ required: true, message: '请确认密码' }, { validator: validateConfirmPassword }]"
                    left-icon="lock" />
                <div style="margin: 36px;">
                    <van-button size='large'  round block type="primary" native-type="submit" :loading="loading">
                        注册
                    </van-button>
                </div>
            </van-form>
            <div class="extra-links">
                <router-link to="/login">已有账号？去登录</router-link>
            </div>
        </div>
    </div>
</template>

<script>
import { register } from '@/api/index';

export default {
    data() {
        return {
            loading: false,
            form: {
                username: '',
                nickname: '',
                password: '',
                confirmPassword: ''
            }
        };
    },
    methods: {
        validateConfirmPassword(val) {
            if (val !== this.form.password) {
                return '两次输入的密码不一致';
            }
            return true;
        },
        async submitForm() {
            this.loading = true;
            try {
                // 调用后端注册接口
                await register(this.form);

                // 显示注册成功提示
                await showDialog({
                    title: '注册成功',
                    message: '注册成功，请登录',
                    theme: 'round-button',
                    confirmButtonText: '确定',
                    onConfirm: () => {
                        // 弹窗关闭后跳转到登录页面
                        this.$router.push('/login');
                    }
                });

                // 重置表单验证
                this.$refs.registerForm.resetValidation();
            } catch (error) {
                showDialog({
                    title: '注册失败',
                    message: '用户名或昵称已被占用或网络有问题',
                    theme: 'round-button',
                    confirmButtonText: '确定',
                    onConfirm: () => {
                        // 弹窗关闭后跳转到登录页面
                        this.$router.push('/login');
                    }
                })
            } finally {
                this.loading = false;
            }
        }
    }
};
</script>

<style>
.register-container input {
    touch-action: none;
}
</style>
